<template>
    <div class="tags">
        <el-tag :key="tag.name" v-for="(tag) in tags" :closable="tag.name !== 'home'" :disable-transitions="false" :effect="$route.name === tag.name ?'dark' : 'plain'" @click="changeMenu(tag)">
       {{tag.label}}
        </el-tag>
    </div>
</template>
<script setup>
import { useRouter} from 'vue-router';
import {useStore} from 'vuex';

const store = useStore();
const router = useRouter();
const tags = store.state.tabsList;

const changeMenu = (tag) => {
router.push({name: item.name})
}

</script>
<style scoped>
.tags{
    padding: 20px;
    width: 100%;
}
.tags .el-tag{
        margin-right: 15px;
        cursor: pointer;
}

</style>
